<div id="app-customizer">
  <div class="handle" *ngIf="!isCustomizerOpen">
    <button mat-fab color="warn" (click)="isCustomizerOpen = true">
      <mat-icon>settings</mat-icon>
    </button>
  </div>
  <mat-card class="p-0" *ngIf="isCustomizerOpen">
    <mat-card-title class="mat-bg-warn">
      <div class="card-title-text">
        <span>Settings</span>
        <span fxFlex></span>
        <button class="card-control" mat-icon-button (click)="isCustomizerOpen = false">
          <mat-icon>close</mat-icon>
        </button>
      </div>
    </mat-card-title>
    <mat-card-content>
      <div class="pb-1">
        <h5 class="m-0 pb-1">Choose a Navigation Style</h5>
        <mat-radio-group fxLayout="column" [(ngModel)]="selectedMenu" (change)="changeSidenav($event)">
          <mat-radio-button *ngFor="let type of sidenavTypes" [value]="type.value">
            {{type.name}}
          </mat-radio-button>
        </mat-radio-group>
      </div>
      <mat-divider></mat-divider>
      <div class="pt-1 pb-1">
        <mat-checkbox (change)="toggleBreadcrumb($event)" [checked]="true">Use breadcrumb</mat-checkbox>
      </div>
    </mat-card-content>
  </mat-card>
</div>
